
body{
     background: #f5f5f5;
}

.jd_layout{
     min-width: 320px;
     max-width: 640px;
     margin: auto;
}

/*顶部通栏*/
.jd_header{
     height: 40px;
     border-bottom: 1px solid #ccc;
     position: relative;
}

.jd_header>[class^=icon_]{
    position: absolute;
    width: 20px;
    height: 20px;
    top:10px;
}
.jd_header>.icon_back{
     left: 3px;
     background-position:-20px 0;
}
.jd_header>.icon_menu{
      background-position:-60px 0;
      right: 5px;
}
.jd_header>h3{
     text-align: center;
     line-height: 40px;
     font-weight: normal;
}
/*属于header*/
/*-----------------------------------------------------------*/
/*安全提示*/
.jd_safe_tip{
     height: 33px;
     border-bottom: 1px solid #ccc;
     text-align: center;
     background: #fff;
}
.jd_safe_tip>p{
     font-size: 12px;
     line-height: 33px;
     display: inline-block;
     position: relative;
     padding-left: 23px;
}
.jd_safe_tip>p::before{
      width: 16px;
      height: 20px;
      margin-top:6px;
      content: '';
      display: block;
      position: absolute;
      left: 0;
      background: url("../images/safe_icon.png");
      background-size: 16px 20px;
}
/*------------------ 商品区域 -------------------------*/
.jd_shop{
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     margin-top: 10px;
     background: #fff;
}
.jd_shop>.jd_shop_tit{
        height: 33px;
      /*  border-bottom: 1px solid #ccc;*/
        position: relative;

}
.jd_shop>.jd_shop_tit>.jd_shop_tit_left{
        position: absolute;
        width: 20px;
        height: 20px;
        background: url("../images/shop-icon.png");
        background-size: 50px 100px;
        left: 5px;
        background-position: 102px 0;
        top:6px;
}
.jd_shop>.jd_shop_tit>.jd_shop_tit_right{
        padding-left: 30px;

}

.jd_shop>.jd_shop_tit>.jd_shop_tit_right>img{
        width: 20px;
        height: 20px;
        margin-top: 6px;
        margin-right: 10px;
}
/*
         li:nth-child(1)
                获取当前li 元素的父元素下面的第一个子元素，第一个子元素必须是li 元素
         span:first-of-type  获取到span 的父元素下面的第一个span 元素。

*/
.jd_shop>.jd_shop_tit>.jd_shop_tit_right>span:first-of-type{
        height: 33px;
        line-height: 33px;
}
.jd_shop>.jd_shop_tit>.jd_shop_tit_right>span:last-child{
        height: 33px;
        line-height: 33px;
        margin-right: 10px;
        color: #d8505c;
}

/*产品区域的布局。*/
.jd_product{
      height: 100px;
      border-top: 1px solid #ccc;
      padding: 10px 0;
      position: relative;
}

.jd_product>.jd_product_left{
      position: absolute;
      background: url("../images/shop-icon.png");
      background-size: 50px 100px;
      width: 20px;
      height: 20px;
      left: 5px;
      top: 3px;
      background-position: 77px 0;
}


/*右边的大盒子*/
.jd_product>.jd_product_right{
      padding-left: 30px;
      overflow: hidden;
      width: 100%;
      float: left;
}
.jd_product>.jd_product_right>a{
      float: left;
      width: 80px;
      height: 80px;
      margin: 0 10px;
}
.jd_product>.jd_product_right>a>img{
     width: 100%;
     height: 100%;
}

/*
     我没有写宽度，有一个默认的宽度
*/
.jd_product>.jd_product_right>.product_info{
    /* float: left;*/
     overflow: hidden;
     padding: 0 10px;
     margin-left: 100px;

}
.product_info>a{
    /*height: 30px;*/
    max-height: 30px;
    line-height: 15px;
    display: block;
    float: left;
    color: #ccc;
    overflow: hidden;
}
.product_info>p{
     color: #d8505c;
}
.product_info .option .f_left span{
     float: left;
     border: 1px solid #ccc;
     height: 20px;
     width: 30px;
     text-align: center;
}

.product_info .option .f_left span:first-of-type{
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
}
.product_info .option .f_left span:last-of-type{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.product_info .option input{
     border: 1px solid #ccc;
     width: 40px;
     float: left;
     height: 20px;
}

/*获取到*/
.product_info .option .deletebtn{

}
.product_info .option .up{
     background: url("../images/delete_up.png");
     width: 16px;
     height: 5px;
     background-size: 16px 5px;
     display: block;
}

.product_info .option .down{
     background: url("../images/delete_down.png");
     width: 16px;
     height: 16px;
     background-size: 16px 16px;
     display: block;
     margin-top: -1px;
}

/*---------------------------------------------------------*/
.jd_win{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position:fixed ;
    left: 0;
    top: 0;
}
.jd_win .jd_win_box{
     width: 80%;
     border: 1px solid #ccc;
     margin: 0 auto;
     margin-top: 200px;
     border-radius: 4px;
     background: #fff;
     padding: 0 10px;
}

.jd_win .jd_win_box .info{
     height: 80px;
     text-align: center;
     font-size: 16px;
     line-height: 80px;
     border-bottom: 1px solid  #ccc;
}
.jd_win .jd_win_box  .btn{
    overflow: hidden;
}

.jd_win .jd_win_box .cancel{
     margin-right: 10%;
     color: #333;
}

.jd_win .jd_win_box a{
     float: left;
     width: 45%;
     height: 30px;
     line-height: 30px;
     border: 1px solid #ccc;
     border-radius: 3px;
     text-align: center;
     margin: 10px 0;

}
.jd_win .jd_win_box .ok{
     background: #d8505c;
     color: #fff;
}

.animationWin{
     animation: bounceInDown .5s linear 1;
}
/*定义动画*/
@keyframes bounceInDown {
         0%{
             transform: translateY(-3000px);
             opacity: 0;
         }
         60%{

             transform: translateY(100px);
             opacity: 1;
         }
         70%{

             transform: translateY(-20px);
         }
         90%{

             transform: translateY(50px);
         }
         100%{

            transform: translateY(0px);
         }
}








